<template>
	<view class="pt-small-function">
		<view class="small-function">
			<view class="small-function-left" v-if="showLeft">
				<view :class="['type-item',{active: typeIndex==index}]" v-for="(data,index) in  typeList" :key="index" @click="selectType(index)">{{data.name}}</view>
			</view>
			<view :class="['small-function-right',{less: sortDataListLength==2,hideleft: !showLeft}]">
				<view
					v-for="(data,index) in sortDataList"
					:key="index"
					:class="['sort-item',{active: sortIndex===index}]" 
					@click="selectSort(index)">
					<text>{{data.name}}</text>
					<u-icon name="arrow-down-fill" :color="sortIndex===index?'#F59359':'#909090'" size="15" class="u-icon"></u-icon>
				</view>
			</view>
		</view>
		<view :class="['small-function-pop',{fixed: showPop}]" v-if="showPop" :style="'height:' + pageHeight + 'px'" @touchmove.stop.prevent="">
			<view class="small-function-pop-list">
				<view class="small-function-pop-items">
					<scroll-view scroll-y class="small-function-pop-scroll-view">
						<view
							:class="['item',{active: sort_id==data.sort_id}]"
							v-for="(data,index) in popList"
							:key="index"
							v-if="sortIndex==0"
							@click="clickItem(0,data.sort_id,index)">
							<text>{{data.sort_name}}</text>
							<u-icon name="checkbox-mark" v-if="sort_id==data.sort_id && data.sort_id!=4 && data.sort_id!=6" color="#F59359" size="28"></u-icon>
							<view class="arrow" v-if="data.sort_id==4 || data.sort_id==6">
								<view class="arrow-btn" :class="{active: asc==2}" @click="clickItem(0,data.sort_id,index,'price',2)">由高到低</view>
								<view class="arrow-btn" :class="{active: asc==1}" @click="clickItem(0,data.sort_id,index,'price',1)">由低到高</view>
							</view>
						</view>
						<view
							:class="['item',{active: data.selected}]"
							v-for="(data,index) in spaceList"
							:key="index"
							v-if="sortIndex==1"
							@click="clickItem(1,data.space_id,index)">
							<text>{{data.space_name}}</text>
							<u-icon name="checkbox-mark" v-if="data.selected" color="#F59359" size="28"></u-icon>
						</view>
						<block v-if="showSpace">
							<view
								:class="['item',{active: data.selected}]"
								v-for="(data,index) in styleList"
								:key="index"
								v-if="sortIndex==2"
								@click="clickItem(2,data.style_id,index)">
								<text>{{data.style_name}}</text>
								<u-icon name="checkbox-mark" v-if="data.selected" color="#F59359" size="28"></u-icon>
							</view>
						</block>
						<block v-else>
							<view
								:class="['item',{active: data.selected}]"
								v-for="(data,index) in styleList"
								:key="index"
								v-if="sortIndex==1"
								@click="clickItem(2,data.style_id,index)">
								<text>{{data.style_name}}</text>
								<u-icon name="checkbox-mark" v-if="data.selected" color="#F59359" size="28"></u-icon>
							</view>
						</block>
						<block v-if="showClass">
							<view
								:class="['item',{active: data.selected}]"
								v-for="(data,index) in classList"
								:key="index"
								v-if="sortIndex==3"
								@click="clickItem(3,data.class_id,index)">
								<text>{{data.class_name}}</text>
								<u-icon name="checkbox-mark" v-if="data.selected" color="#F59359" size="28"></u-icon>
							</view>
						</block>
					</scroll-view>
				</view>
				<view class="small-function-pop-btns" v-if="sortIndex > 0 && Multiple">
					<view @click="rest">重置</view>
					<view @click="confirm">确定</view>
				</view>
			</view>
			<view class="small-function-pop-mask" @click="closePop"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showLeft: {
				type: Boolean,
				default () {
					return true
				}
			},
			typeIndexProps: {
				type: Number,
				default: 0
			},
			spaceID: {
				type: String,
				default: ''
			},
			classID: {
				type: String,
				default: ''
			},
			styleID: {
				type: String,
				default: ''
			},
			isMerchantClass: {
				type: Boolean,
				default () {
					return false
				}
			},
			showClass: {
				type: Boolean,
				default () {
					return false
				}
			},
			showSpace: {
				type: Boolean,
				default () {
					return true
				}
			},
			spacePopList: {
				type: Array,
				default () {
					return []
				}
			},
			stylePopList: {
				type: Array,
				default () {
					return []
				}
			},
			classPopList: {
				type: Array,
				default () {
					return []
				}
			},
			sortPopList: {
				type: Array,
				default () {
					return [{
						sort_id: 1,
						sort_name: '综合',
						selected: false
					},{
						sort_id: 2,
						sort_name: '上新',
						selected: false
					}]
				}
			},
			Multiple: {
				type: Boolean,
				default () {
					return false
				}
			},
			typeList: {
				type: Array,
				default () {
					return [{
						type: 1,
						name: '小图'
					},{
						type: 2,
						name: '大图'
					}]
				}
			},
			sortList: {
				type: Array,
				default () {
					return [{
						name: '综合'
					},{
						name: '空间'
					},{
						name: '风格'
					},{
						name: '品类'
					}]
				}
			}
		},
		watch: {
			spacePopList(newValue,oldValue){
				if(this.spaceID){
					newValue.forEach(item => {
						if(item.space_id==this.spaceID){
							this.sortList[1].name = item.space_name
						}
					})
				}
			},
			classPopList(newValue,oldValue){
				if(this.classID){
					newValue.forEach(item => {
						if(item.class_id==this.classID){
							this.sortList[3].name = item.class_name
						}
					})
				}
			},
			stylePopList(newValue,oldValue){
				if(this.styleID){
					newValue.forEach(item => {
						if(item.style_id==this.styleID){
							this.sortList[2].name = item.style_name
						}
					})
				}
			},
			styleID(newValue,oldValue){
				if(newValue.indexOf(',')){
					this.style_id = newValue.split(',')
				}
			}
		},
		data() {
			return {
				showPop: false,
				pageHeight: '',
				typeIndex: 0,
				sortIndex: null,
				sortDataList: [],
				popList: [],
				sort_id: 1,
				space_id: this.Multiple?[]:'',
				style_id: this.Multiple?[]:'',
				class_id: this.Multiple?[]:'',
				spaceList: [],
				styleList: [],
				classList: [],
				sortDataListLength: 0,
				asc: ''
			};
		},
		methods: {
			selectType(e){
				this.typeIndex = e
				this.$emit('changeType',e)
			},
			selectSort(e){
				if(this.sortIndex === e){
					this.showPop = false
					this.popList = []
					this.sortIndex = null
				}else{
					this.showPop = true
					this.popList = this.sortPopList
					this.sortIndex = e
				}
				switch (Number(e)){
					case 1:
						if(this.showSpace){
							this.spaceList = this.spacePopList
						}else{
							this.styleList = this.stylePopList
						}
						break;
					case 2:
						this.styleList = this.stylePopList
						break;
					case 3:
						this.classList = this.classPopList
						break;
				}
				if(this.Multiple){
					if(!this.space_id.length && this.spaceID){
						this.spaceList.forEach(item => {
							if(item.space_id==this.spaceID){
								this.$set(item,'selected',true)
							}
						})
					}
				}
				if(this.Multiple){
					if(!this.class_id.length && this.classID){
						this.classList.forEach(item => {
							if(item.class_id==this.classID){
								this.$set(item,'selected',true)
							}
						})
					}
				}
				if(this.Multiple){
					if(!this.style_id.length && this.styleID){
						this.styleList.forEach(item => {
							if(item.style_id==this.styleID){
								this.$set(item,'selected',true)
							}
						})
					}else if(this.style_id.length && this.styleID){
						this.styleList.forEach(item => {
							this.style_id.forEach(data => {
								if(item.style_id==data){
									this.$set(item,'selected',true)
								}
							})
						})
					}
				}
				this.$emit('scroll')
			},
			getPageHeight(){
				let systemInfo = uni.getSystemInfoSync()
				this.pageHeight = systemInfo.windowHeight
			},
			sortFunc(){
				let obj = {
					sort: '',
					space_id: typeof this.space_id==='object'?this.space_id.join(','):this.space_id,
					style_id: typeof this.style_id==='object'?this.style_id.join(','):this.style_id,
					class_id: typeof this.class_id==='object'?this.class_id.join(','):this.class_id
				}
				switch (Number(this.sort_id)){
					case 1:
						obj.sort = 'sort'
						break;
					case 2:
						obj.sort = 'add_time'
						break;
					case 3:
						obj.sort = 'click'
						break;
					case 4:
						obj.sort = 'retail_price'
						break;
					case 5:
						obj.sort = 'sale_count_'
						break;
					case 6:
						obj.sort = 'price_'
						break;
					case 7:
						obj.sort = 'number'
						break;
				}
				if(this.sort_id==4 || this.sort_id==6){
					obj.asc = this.asc
				}else{
					this.asc = ''
					delete obj.asc
				}
				this.$emit('clickItem',obj)
			},
			clickItem(type,id,index,price,asc){
				switch (Number(type)){
					case 0:
						this.addFoot('筛选-综合-'+this.popList[index].sort_name)
						if((id==4 || id==6) && !price){
							return false
						}
						if(price && asc){
							this.asc = asc
						}
						this.sort_id = id
						this.sortIndex = null
						this.showPop = false
						this.sortList[type].name = this.popList[index].sort_name
						this.sortFunc()
						break;
					case 1:
						// 是否多选
						if(!this.Multiple){
							this.showPop = false
							this.sortIndex = null
							this.spaceList.forEach(item => {
								this.$set(item,'selected',false)
							})
						}
						// 是否选择全部
						if(!id){
							this.spaceList.forEach(item => {
								this.$set(item,'selected',false)
							})
						}else{
							this.spaceList[0].selected = false
						}
						this.spaceList.forEach(item => {
							if(item.space_id==id){
								if(item.selected){
									this.$set(item,'selected',false)
								}else{
									this.$set(item,'selected',true)
								}
							}
						})
						if(!this.Multiple){
							this.sortList[type].name = this.spaceList[index].space_name
						}else{
							let names = []
							this.spaceList.forEach(item => {
								if(item.selected){
									names.push(item.space_name)
								}
							})
							if(names.length){
								this.sortList[type].name = names.join(',')
							}else{
								if(this.isMerchantClass){
									this.sortList[type].name = '材质'
								}else{
									this.sortList[type].name = '空间'
								}
							}
						}
						break;
					case 2:
						// 是否多选
						if(!this.Multiple){
							this.showPop = false
							this.sortIndex = null
							this.styleList.forEach(item => {
								this.$set(item,'selected',false)
							})
						}
						// 是否选择全部
						if(!id){
							this.styleList.forEach(item => {
								this.$set(item,'selected',false)
							})
						}else{
							this.styleList[0].selected = false
						}
						this.styleList.forEach(item => {
							if(item.style_id==id){
								if(item.selected){
									this.$set(item,'selected',false)
								}else{
									this.$set(item,'selected',true)
								}
							}
						})
						if(!this.Multiple){
							this.sortList[type].name = this.styleList[index].style_name
						}else{
							let names = []
							this.styleList.forEach(item => {
								if(item.selected){
									names.push(item.style_name)
								}
							})
							if(names.length){
								this.sortList[type].name = names.join(',')
							}else{
								this.sortList[type].name = '风格'
							}
						}
						break;
					case 3:
						// 是否多选
						if(!this.Multiple){
							this.showPop = false
							this.sortIndex = null
							this.classList.forEach(item => {
								this.$set(item,'selected',false)
							})
						}
						// 是否选择全部
						if(!id){
							this.classList.forEach(item => {
								this.$set(item,'selected',false)
							})
						}else{
							this.classList[0].selected = false
						}
						this.classList.forEach(item => {
							if(item.class_id==id){
								if(item.selected){
									this.$set(item,'selected',false)
								}else{
									this.$set(item,'selected',true)
								}
							}
						})
						if(!this.Multiple){
							this.sortList[type].name = this.classList[index].class_name
						}else{
							let names = []
							this.classList.forEach(item => {
								if(item.selected){
									names.push(item.class_name)
								}
							})
							if(names.length){
								this.sortList[type].name = names.join(',')
							}else{
								if(this.isMerchantClass){
									this.sortList[type].name = '类型'
								}else{
									this.sortList[type].name = '品类'
								}
							}
						}
						break;
				}
			},
			rest(){
				if(this.sortIndex==1){
					this.space_id = this.Multiple?[]:''
					this.spaceList.forEach(item => {
						this.$set(item,'selected',false)
					})
				}else if(this.sortIndex==2){
					this.style_id = this.Multiple?[]:''
					this.styleList.forEach(item => {
						this.$set(item,'selected',false)
					})
				}else if(this.sortIndex==3){
					this.class_id = this.Multiple?[]:''
					this.classList.forEach(item => {
						this.$set(item,'selected',false)
					})
				}
			},
			confirm(){
				if(this.sortIndex==1){
					if(this.showSpace){
						this.space_id = []
						let addFootSpace = []
						this.spaceList.forEach(item => {
							if(this.Multiple){
								if(item.selected){
									this.space_id.push(item.space_id)
									addFootSpace.push(item.space_name)
								}
							}
						})
						if(addFootSpace.length==1){
							this.addFoot('筛选-空间-'+addFootSpace.join(','))
						}
						if(!this.isMerchantClass){
							this.class_id = this.Multiple?[]:''
							this.sortList[3].name = '品类'
						}
					}else{
						this.style_id = []
						let addFootStyle = []
						this.styleList.forEach(item => {
							if(this.Multiple){
								if(item.selected){
									this.style_id.push(item.style_id)
									addFootStyle.push(item.style_name)
								}
							}
						})
						if(addFootStyle.length == 1){
							this.addFoot('筛选-风格-'+addFootStyle.join(','))
						}
					}
				}else if(this.sortIndex==2){
					this.style_id = []
					let addFootStyle = []
					this.styleList.forEach(item => {
						if(this.Multiple){
							if(item.selected){
								this.style_id.push(item.style_id)
								addFootStyle.push(item.style_name)
							}
						}
					})
					if(addFootStyle.length == 1){
						this.addFoot('筛选-风格-'+addFootStyle.join(','))
					}
				}else if(this.sortIndex==3){
					this.class_id = []
					let addFootClass = []
					this.classList.forEach(item => {
						if(this.Multiple){
							if(item.selected){
								this.class_id.push(item.class_id)
								addFootClass.push(item.class_name)
							}
						}
					})
					if(addFootClass.length == 1){
						this.addFoot('筛选-品类-'+addFootClass.join(','))
					}
				}
				if(this.sortIndex==1){
					if(!this.space_id || !this.space_id.length){
						if(this.isMerchantClass){
							this.sortList[1].name = '材质'
						}else{
							this.sortList[1].name = '空间'
						}
					}
				}else if(this.sortIndex==2){
					if(!this.style_id || !this.style_id.length){
						this.sortList[2].name = '风格'
					}
				}
				this.showPop = false
				this.sortIndex = null
				this.sortFunc()
			},
			closePop(){
				this.showPop = false
				this.sortIndex = null
			},
			addFoot(where) {
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			}
		},
		mounted() {
			this.getPageHeight()
			if(this.showSpace && this.showClass){
				this.sortDataList = this.sortList
			}else if(!this.showSpace && this.showClass){
				this.sortDataList = this.sortList.filter(function(item) {
					return item.name !== '空间'
				});
			}else if(!this.showSpace && !this.showClass){
				this.sortDataList = this.sortList.filter(function(item) {
					return item.name !== '空间' &&  item.name !== '品类'
				});
			}else if(this.showSpace && !this.showClass){
				this.sortDataList = this.sortList.filter(function(item) {
					return item.name !== '品类'
				});
			}
			this.sortDataListLength = this.sortDataList.length
			if(this.spaceID){
				this.space_id = this.spaceID
				this.spacePopList.forEach(item => {
					if(item.space_id==this.spaceID){
						this.sortList[1].name = item.space_name
						uni.setNavigationBarTitle({
							title: item.space_name
						})
					}
				})
			}
			if(this.classID){
				this.class_id = this.classID
				this.classPopList.forEach(item => {
					if(item.class_id==this.classID){
						this.sortList[3].name = item.class_name
						uni.setNavigationBarTitle({
							title: item.class_name
						})
					}
				})
			}
			if(this.styleID){
				if(this.styleID.indexOf(',')){
					this.style_id = this.styleID.split(',')
				}else{
					this.style_id = this.styleID
					this.stylePopList.forEach(item => {
						if(item.style_id==this.styleID){
							this.sortList[2].name = item.style_name
							uni.setNavigationBarTitle({
								title: item.style_name
							})
						}
					})
				}
			}
			if(this.typeIndexProps){
				this.typeIndex = this.typeIndexProps
			}
		}
	}
</script>

<style lang="scss">
	.pt-small-function{
		background-color: #FFF;
	}
	.small-function-left{
		// position: fixed;
		display: flex;
		align-items: center;
		// bottom: 0;
		// right: 0;
		// z-index: 1;
		.type-item{
			height: 50rpx;
			line-height: 50rpx;
			padding: 0 22rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			color: #909090;
			&.active{
				background-color: #FAFAFA;
				color: #F59359;
			}
		}
	}
	.small-function{
		padding: 40rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		&::before{
			content: '';
			width: 30rpx;
			left: -30rpx;
			top: 0;
			height: 100%;
			background-color: #FFF;
			position: absolute;
		}
		&::after{
			content: '';
			width: 30rpx;
			right: -30rpx;
			top: 0;
			height: 100%;
			background-color: #FFF;
			position: absolute;
		}
		.small-function-right{
			display: flex;
			align-items: center;
			flex: 1;
			min-width: 0;
			&.less{
				justify-content: flex-end;
				.sort-item{
					flex: none;
					width: 8em;
					text{
						max-width: 6em;
					}
				}
			}
			&.hideleft{
				justify-content: flex-start;
				.sort-item{
					justify-content: flex-start;
					text{
						max-width: none;
					}
				}
			}
			.sort-item{
				color: #909090;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				flex: 1;
				justify-content: flex-end;
				text{
					display: inline-block;
					vertical-align: middle;
					max-width: 3em;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				&.active{
					color: #F59359;
					.u-icon{
						transform: rotate(-180deg);
					}
				}
				.u-icon{
					margin-left: 10rpx;
					vertical-align: middle;
					transition: all .5s;
				}
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.small-function-pop{
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		.small-function-pop-list{
			position: relative;
			z-index: 1;
			background-color: #FFF;
			.small-function-pop-scroll-view{
				max-height: 520rpx;
			}
			.item{
				border-bottom: solid 1px #F6F6F6;
				height: 105rpx;
				line-height: 105rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				color: #757575;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&:last-child{
					border-bottom: none;
				}
				&.active{
					font-weight: bold;
					color: #F59359;
				}
				.arrow{
					line-height: normal;
					display: flex;
					align-items: center;
					.arrow-box{
						height: 28rpx;
						color: #999;
						line-height: normal;
						&.active{
							color: #F59359;
						}
					}
					.arrow-btn{
						background-color: #EEE;
						color: #141414;
						font-weight: normal;
						font-size: 24rpx;
						padding: 10rpx;
						border-radius: 8rpx;
						&:first-child{
							margin-right: 30rpx;
						}
						&.active{
							background-color: #F59359;
							color: #FFF;
						}
					}
				}
			}
			.small-function-pop-btns{
				display: flex;
				view{
					flex: 1;
					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
					background-color: #F8F8F8;
					color: #999;
					&:last-child{
						border-left: solid 1px #EEE;
						background-color: #F59359;
						color: #FFF;
					}
				}
			}
		}
		.small-function-pop-mask{
			position: absolute;
			top: 40rpx;
			left: 0;
			right: 0;
			height: 100%;
			background-color: rgba(0,0,0,.2);
		}
	}
</style>